<template>
    <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="baseInfo" tab="基本信息">
            <a-form
                ref="groupRef"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 16 }"
                :model="groupInfo"
            >
                <a-row :gutter="24" style="margin-left: 0px;margin-right: 0px;">
                    <a-col :span="12">
                        <a-form-item  label="群组名称" name="name" 
                        :rules="[{ required: true, message: '请输入群组名称!' }]">
                            <a-input v-model:value="groupInfo.name"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item  label="群组编码" name="code" 
                            :rules="[{ required: true, message: '请输入群组编码!' }]">
                            <a-input v-model:value="groupInfo.code"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item  label="所属组织" name="orgId"  
                        :rules="[{ required: true, message: '所属组织!' }]">
                            <a-tree-select
                                v-model:value="groupInfo.orgId"
                                style="width: 100%"
                                :tree-data="orgDataTree"
                                tree-checkable
                                allow-clear
                                placeholder="请选择"
                                tree-node-filter-prop="label"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item  label="群组领导" name="leader	">
                            <div style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;">
                                <a-space>
                                    <div style="overflow: auto;" class="tagboxs">
                                        <a-tag closable @close="handleClose()" v-for="tag in leaderTags" :key="tag">
                                            {{ tag.NAME }}
                                        </a-tag>
                                    </div>
                                </a-space>
                                <n-button style="margin-left: auto;" size="small" secondary type="info" @click="openModal">
                                    <template #icon>
                                        <n-icon><svg-icon name="touxiang" size="18" /></n-icon>
                                    </template>请选择
                                </n-button>
                            </div>
                        <a-input v-model:value="groupInfo.leader" hidden></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item  label="群组类型" name="groupType">
                            <a-input v-model:value="groupInfo.groupType"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item  label="关键字" name="keyWords">
                            <a-input v-model:value="groupInfo.keyWords"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item  label="是否启用" name="IS_ENABLED">
                            <a-radio-group v-model:value="groupInfo.IS_ENABLED">
                                <a-radio :value=0>不启用</a-radio>
                                <a-radio :value=1>启用</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item  label="是否与业务相关" name="IS_BUSINESS">
                            <a-radio-group v-model:value="groupInfo.IS_BUSINESS">
                                <a-radio :value=0>否</a-radio>
                                <a-radio :value=1>是</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" >
                        <a-form-item  :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }"  label="排序号" name="groupSort">
                            <a-input-number v-model:value="groupInfo.groupSort"></a-input-number>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" >
                        <a-form-item  :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }"  label="备注" name="remark">
                            <a-textarea v-model:value="groupInfo.remark"></a-textarea>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-tab-pane>
        <a-tab-pane v-if="groupInfo.id!==''&&groupInfo.id!==undefined" key="groupUsers" tab="群组人员">
            <a-button type="primary" @click="openUserModal"> 新增 </a-button>
            <DynamicTable :dataSource="groupUser" :columns="columns" >
            </DynamicTable>
        </a-tab-pane>
    </a-tabs>
    
</template>
<script lang="tsx" setup>
    import { reactive, h,ref,unref, defineComponent } from 'vue';
    import type { FormInstance } from 'ant-design-vue';
    import { Tag, Tree } from 'ant-design-vue';
    import { TreeSelect } from 'ant-design-vue';
    import userSingle from '@/components/system/orgUserSingle/userSingle.vue';
    import userMore from '@/components/system/orgUserMore/userMore.vue';
    import { useModal } from '@/hooks/useModal/useModal';
    import { useTable } from '@/components/core/dynamic-table';
    import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    FileSyncOutlined,
  } from '@ant-design/icons-vue';

    const SHOW_PARENT = TreeSelect.SHOW_PARENT;
    defineComponent({
        userSingle,
        userMore
    })
    interface GroupItem{
      defaultData?:any;
    };
    const props = withDefaults(defineProps<GroupItem>(),{
        defaultData:{
            users:[],
            orgData:[],
            groupItem:{
                /**
                * id
                */
                id: '',
                /**
                * 群组名称
                */
                name: '',
                /**
                * 群组编码
                */
                code: '',
                /**
                * 所属组织
                */
                orgId: [],
                /**
                 * 群组类型
                */
                groupType: '',
                /**
                * 群组领导
                */
                leader: '',
                /**
                 * 领导名称
                */
                leaderName: '',
                /**
                * 关键字
                */
                keyWords: '',
                /**
                * 排序号
                */
                groupSort: undefined,
                /**
                * 备注
                */
                remark: '',
                /**
                * 是否启用
                */
                IS_ENABLED: 1,
                /**
                * 是否业务相关
                */
                IS_BUSINESS: 0,
                /**
                 * 群组成员
                 */
                groupUsers:[],
            },   
        }
    });
    const [ModalRender, modalRef] = useModal()
    const groupRef = ref<FormInstance>();
    const userSingleRef = ref<FormInstance>();
    const groupInfo = reactive(props.defaultData.groupItem);
    const orgDataTree=reactive(props.defaultData.orgData);
    const groupUser=reactive(props.defaultData.users);
    const activeKey=ref("baseInfo");
    const leaderTags=ref<any>([]);
    const editDrawerBindValue = reactive({
        defaultSelectData: [],
        runType:''
    });
    const openModal = async()=>{
        ModalRender.show({
        title: '选择岗位领导',
        width: '70%',
        // 是否显示右上角确定取消
        defaultExtra: true,
        destroyOnClose: true,
        content: () => {
            return <userSingle  ref={userSingleRef} defaultData={unref(editDrawerBindValue)}></userSingle>;
        },
        // 确定方法执行
        onOk: async (values) => {
            const res = await userSingleRef.value?.handleSubmit();
            if (!res) return;
            leaderTags.value.push(res);
            groupInfo.leader=res.NO;
        },
        });
    };
    const openUserModal = async()=>{
        ModalRender.show({
        title: '选择群组人员',
        width: '70%',
        // 是否显示右上角确定取消
        defaultExtra: true,
        destroyOnClose: true,
        content: () => {
            return <userMore  ref={userSingleRef} defaultData={unref(editDrawerBindValue)}></userMore>;
        },
        // 确定方法执行
        onOk: async (values) => {
            const res = await userSingleRef.value?.handleSubmit();
            if (!res) return;
            if(res.length>0){
                res.map((item)=>{
                    if(groupUser.filter(obj => obj.userAccount==item.NO)<=0){
                        groupUser.push({
                            userAccount:item.NO,
                            name:item.NAME,
                        }); 
                    }
                })
            }
            groupInfo.groupUsers=groupUser;
        },
        });
    };
    const loadTagData=()=>{
        if(groupInfo.orgId.length>0){
            groupInfo.orgId=groupInfo.orgId.split(',').map(String);
        }
        if(groupInfo.leader!==''&&groupInfo.leaderName!==''){
            const tag={
                NO:groupInfo.leader,
                NAME:groupInfo.leaderName,
                ORG_TYPE:'user'
            }
            leaderTags.value.push(tag);
        }
    };
    loadTagData();
    const handleClose=()=>{
        leaderTags.value=[];
        groupInfo.leader="";
    }
    const [DynamicTable] = useTable({
        size: 'small',
        rowKey: 'userAccount',
        bordered: true,
        showIndex: true,
        search: false,
        showToolBar: false,
    });
    const columns = [
    {
      title: '人员姓名',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '登录账号',
      dataIndex: 'userAccount',
      align: 'center',
    },
    {
      title: '操作',
      width: 150,
      dataIndex: 'ACTION',
      align: 'center',
      actions: ({ record }) => [
        {
          label: '删除',
          danger: true,
          icon: h(DeleteOutlined),
          popConfirm: {
            title: '你确定要删除吗？',
            onConfirm: () => delRowConfirm(record.userId),
          },
        },
      ],
    },
  ];
  const delRowConfirm=(userId)=>{
    groupUser.splice(
        groupUser.findIndex((item) => item.userAccount === userId),
        1
    );
  }
    const onSubMit = () => {
        return [groupInfo,groupRef]
    };

    defineExpose({
        handleSubmit: onSubMit,
    });
</script>